$(function(){
    initEditor() //初始化富文本编辑器

    // 1. 初始化图片裁剪器
    let $image = $('#image')

    // 2. 裁剪选项
    let options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }

    // 3. 初始化裁剪区域
    $image.cropper(options)

    let form = layui.form

    initArtCateList()
    //渲染文章类别的方法
    function initArtCateList(){
        axios({
            url:'/my/article/cates',
        }).then(res=>{
            //成功回调
            let dataArr = res.data.data
            let htmlArr = ['<option value="" >请选择文章类别</option>']
            dataArr.forEach(value => {
                //在value里面储存id
                htmlArr.push(`<option value="${value.Id}" >${value.name}</option>`)
            })
            $('[name="cate_id"]').empty().html(htmlArr.join(''))
            //渲染全部动态新增的form表单
            form.render()
        })
    }


    //定义一个判断是点击的发布函数草稿
    let state = ''
    $('#btn1').on('click', function () {
        state = '已发布'
    })
    $('#btn2').on('click', function () {
        state = '草稿'
    })
    //选择封面的点击事件
    $('#chooseImageBtn').on('click', function () {
        $('#chooseImageInp').click()
    })
    //change文件上传事件，完成图片数据的渲染
    $('#chooseImageInp').on('change', function (e) {
        e.preventDefault()
        // 1. 拿到用户选择的文件
        var file = e.target.files[0]
        if(file===undefined)   return layer.msg('上传的头像不能为空')
        // 2. 根据选择的文件，创建一个对应的 URL 地址：
        var newImgURL = URL.createObjectURL(file)
        // 3. 先`销毁`旧的裁剪区域，再`重新设置图片路径`，之后再`创建新的裁剪区域`：
        $image
            .cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', newImgURL) // 重新设置图片路径
            .cropper(options) // 重新初始化裁剪区域
    })


     //发布事件
     $('form').on('submit', function (e) {
        e.preventDefault()
        //ajax传参数据必须是formData的格式
        let fd = new FormData(this)
        //追加上传||草稿
        fd.append('state', state)
        //将数据转换成
        $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
            width: 400,
            height: 280
          }).toBlob(function(blob) {       // 将 Canvas 画布上的内容，转化为文件对象
            // 得到文件对象后，进行后续的操作
            //放入得到的对象
            fd.append('cover_img',blob)
            // 遍历数组查看
            console.log(...fd)
            axios({
                url:'/my/article/add',
                method:'post',
                data: fd
                
            }).then(res=>{
                //成功回调
                if(res.data.status != 0) return layer.msg(res.data.message)
                layer.msg(res.data.message)
                
            })
          })
        

    })

})